<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue监测数据 总结</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
            <button @click='student.age++'>年龄加 1 岁</button><br><br>
            <button @click='addSex'>添加性别属性 默认值 男</button><br><br>
            <button @click='addfriend'>在列表首位添加一个朋友</button><br><br>
            <button @click='updateFriendName'>修改第一个朋友的名字为  张三</button><br><br>
            <button @click='addHobby'>添加一个爱好</button><br><br><br>
            <button @click='updateHobby'>修改第一个爱好为 开车</button>


			<h2>姓名：{{student.name}}</h2>
			<h2>年龄：{{student.age}}</h2>
			<h2 v-if='student.sex'>性别：{{student.sex}}</h2>
			<h2>爱好</h2>
			<ul>
				<li v-for="(h,index) in student.hobby" :key="index">
					{{h}}
				</li>
			</ul>
			<h2>朋友们</h2>
			<ul>
				<li v-for="(f,index) in student.friends" :key="index">
					{{f.name}}--{{f.age}}
				</li>   
			</ul>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				student:{
					name:'tom',
					age:12,
					hobby:['抽烟','喝酒','烫头'],
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:36}
					]
				}
			},

            methods: {
                addSex(){
                    this.$set(this.student, 'sex', '男')
                    // Vue.set(this.student, 'sex', '男')  两者都可
                },
                addfriend(){
                    this.student.friends.unshift({name:'王五', age: 12})
                },
                updateFriendName(){
                    this.student.friends[0].name = '张三'
                },
                addHobby(){
                    this.student.hobby.push('游泳')
                },
                updateHobby(){

                    // 两者都可
                    
                    // this.$set(this.student.hobby, 0, '开车')

                    // splice('索引-第几个',  '删除几个', '增加的内容')
                    this.student.hobby.splice(0, 1, '开车')

                }
            },

		})
	</script>
</html>